import React, { useEffect } from "react"
import Page from "@/components/layout/page/Page"
import { echarts } from "@/config/echartsConfig"
import { getMapDataArea } from "@/apis/index"
import { Button } from "antd"
import useEcharts from "@/hooks/echartResize"
function Index() {
  const chartRef = useEcharts()
  let chart
  useEffect(() => {
    if (chartRef.current) {
      chart = echarts.getInstanceByDom(chartRef.current)
    }
    getMapData()
  }, [chartRef])

  let currentName = "中国" //当前选中的name
  let currentCode = 100000 //当前选中的code
  let provinceContent = [] //省级数据
  let history = [] //历史记录

  // 获取地图数据
  async function getMapData() {
    const res = await getMapDataArea(currentCode)
    provinceContent = []
    res.features.forEach((item) => {
      provinceContent.push(item.properties)
    })
    renderChart(currentName, res)
  }
  // 渲染地图
  const renderChart = (mapName, mapData) => {
    echarts.registerMap(mapName, mapData)
    chart.setOption({
      // 悬浮窗
      tooltip: {
        trigger: "item"
      },
      geo: {
        // 地理坐标系组件,支持在地理坐标系上绘制散点图、线图
        map: mapName,
        // center: [115.97, 29.71],
        aspectScale: 0.75,
        top: 0,
        bottom: 0,
        selectedMode: true,
        label: {
          show: true,
          color: "#dbe4e2"
        },
        itemStyle: {
          areaColor: "#011e17",
          borderColor: "#02b177",
          borderWidth: 1.5,
          shadowColor: "#02b177",
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 10
        },
        emphasis: {
          itemStyle: {
            areaColor: "rgba(0,60,153,0.5)",
            shadowColor: "rgba(0,0,0,0.8)"
            // shadowBlur: 5,
            // shadowOffsetY: 5
          }
        }
        // 针对某些区域做一些特别的样式
        // regions: [
        //   {
        //     name: "广东省",
        //     itemStyle: {
        //       areaColor: "yellow",
        //       color: "black",
        //       borderColor: "pink"
        //     }
        //   }
        // ]
      },
      series: [
        {
          type: "effectScatter", // 带有涟漪特效动画的散点（气泡）图
          coordinateSystem: "geo", //该系列使用的坐标系:地理坐标系
          // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
          effectType: "ripple",
          // 配置何时显示特效。可选'render'和'emphasis' 。
          showEffectOn: "render",
          rippleEffect: {
            // 涟漪特效相关配置。
            period: 10, // 动画的周期，秒数。
            scale: 4, // 动画中波纹的最大缩放比例。
            // 波纹的绘制方式，可选 'stroke' 和 'fill'。
            brushType: "fill"
          },
          zlevel: 1, // 所有图形的 zlevel 值。
          // symbolSize: function (value, option) {
          //   console.log(value, option)
          // },
          data: [
            // 散点图数据
            {
              name: "新疆",
              value: [87.628579, 43.793301],
              itemStyle: { color: "#38c58c" }
            },
            {
              name: "四川",
              value: [104.076452, 30.651696],
              itemStyle: { color: "#38c58c", fontSize: 20 }
            },
            { name: "甘肃", value: [103.826777, 36.060634], itemStyle: { color: "#38c58c" } },
            { name: "云南", value: [102.709372, 25.046432], itemStyle: { color: "#38c58c" } },
            { name: "广西", value: [108.327537, 22.816659], itemStyle: { color: "#38c58c" } }
          ]
        }
      ]
    })
    chart.off("click")
    // 下钻
    chart.on("click", (params) => {
      const activeItem = provinceContent.find((item) => item.name == params.name)
      // 判断有子级的时候才可以下钻
      if (activeItem && activeItem.adcode && activeItem.childrenNum) {
        history.push(activeItem)
        currentName = activeItem.name
        currentCode = activeItem.adcode
        getMapData()
      }
    })
  }
  const back = () => {
    const lastItem = history.pop()
    if (lastItem && lastItem.parent) {
      currentCode = lastItem.parent.adcode
      getMapData()
    }
  }
  return (
    <Page>
      <div ref={chartRef} className="!h-95% w-full" />
      <Button onClick={back}>返回</Button>
    </Page>
  )
}

export default Index
